<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>没你好果汁吃点餐小栈</title>
    <style>
        body {
            /* 标签是直接写的 */
            font-size: 16px;
            /*字体的大小，8个像素*/
            /* 一般去看一个元素位置，设置它的边线，调试完再去掉 */
            /* border: 0px solid red; */
            width: 580px;
        }

        /* body {transform: scale(1.5) translate(200px, 100px); } */

        .me {
            /* class属性公用 */
            padding-left: 180px;
        }

        #please {
            font-size: 44px;
            font-weight: bold;
        }

        #billId {
            font-size: 40px;
        }

        .billClass {
            font-size: 40px;
            /* color: green; */
        }
    </style>
</head>

<body>
    <div>小主</div>
    <br /> <!-- html换行符 -->

    <div id="please">请您留意取餐账号单</div>
    <br />

    <!-- 通过左边空白，用户感官是居左 -->
    <div>门店地址</div>
    <div>138 3838 3838</div>

    <div class="me">--结账单--</div>
    <div id="billId" class="billClass">取单号：9</div>
    <div>账单类型：外卖配送</div>
    <div>人数：1</div>
    <div>收银员：张静</div>
    <div>开单时间：2022-07-04 14:34:40</div>
    <div>结账时间：2022-07-04 15:15:20</div>

    <!-- 虚线 dashed：默认实线 solid，换线性 -->
    <hr style="border: 1px dashed;" />

    <!-- 表格：表头行tr/th，普通行tr，单元格td -->
    <table border="0">
        <tr>
            <td width="30" align="middle">数量</td>
            <td width="150" align="middle">品项</td>
            <td width="50" align="center">金额</td>
        </tr>
        <tr>
            <td valign="top">1</td>
            <td>
                <div style="margin: 0">茶冻四季拿铁</div>
                <div>甜度:微甜 测试:2</div>
            </td>
            <td valign=" top" align="right">0</td>
        </tr>
    </table>
    <hr style="border: 1px dashed;" />

    <table border="0">
        <tr>
            <td width="60">配送费</td>
            <td width="288" align="right">8</td>
        </tr>
    </table>

    <hr style="border: 1px dashed;" />

    <table border="0">
        <tr>
            <td width="60">合计</td>
            <td width="288" align="right">8</td>
        </tr>
    </table>

    <hr style="border: 1px dashed;" />
    <div>打印时间：2022-07-08 11:25:23</div>
    <hr style="border: 1px dashed;" />

    <div style="padding-top: 22.5px; width: 500px; margin: auto;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。
    </div>

    <!-- 相对路径访问图片 -->
    <img width="180" src="https://dcdn.it120.cc/2022/07/08/92c74abe-ceaf-460a-88f3-3e4ba5f6a388.png"
        style="padding-left:135px; margin: auto;" />

    <div>官网：www.csu.edu.cn</div>
    <div>加盟热线：129 0886 0730</div>
    <br /><br />
</body>

</html>